<template>
  <div class="w-50 mx-auto" v-if="posts">
    <div class="text-end" v-if="isEdit">
      <button type="button" class="btn btn-link" @click="handleEdit">
        编辑
      </button>
      <button
        type="button"
        class="btn btn-link text-danger"
        @click="handleDelete"
      >
        删除
      </button>
    </div>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <router-link to="/">首页</router-link>
        </li>
        <li class="breadcrumb-item">
          <router-link :to="`/column/${user.column}`"> 专栏首页 </router-link>
        </li>
        <li class="breadcrumb-item active">
          {{ posts.title }}
        </li>
      </ol>
    </nav>
    <article class="mb-5 pb-3" v-if="posts">
      <img
        v-if="postsImage"
        :src="postsImage"
        :alt="posts.title"
        class="rounded-lg img-fluid my-4"
      />
      <h2 class="mb-4">{{ posts.title }}</h2>
      <div
        class="user-profile-component border-top border-bottom py-3 mb-5 align-items-center row g-0"
      >
        <div class="col">
          <posts-author
            :user="posts.author"
            v-if="typeof posts.author === 'object'"
          ></posts-author>
        </div>
        <span class="text-muted col text-end font-italic">
          发表于：{{ posts.createdAt }}
        </span>
      </div>
      <div v-html="postsHtml"></div>
    </article>
    <modal
      v-model:isShow="isShowModal"
      @on-confirm="handleDeleteConfirm"
    ></modal>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import MarkdownIt from 'markdown-it'
import PostsAuthor from '@/components/PostsAuthor.vue'
import Modal from '@/components/Modal.vue'
import messageCreate from '@/components/MessageCreate'
import { resetImagesStyle } from '@/utils'
import { IStore, IImageProp, IUserProp } from '@/types'
export default defineComponent({
  name: 'Posts',
  components: { PostsAuthor, Modal },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const store = useStore<IStore>()
    const user = computed(() => store.state.user)
    const currentPostsId = route.params.id
    const posts = computed(() => store.getters.getPostsById(currentPostsId))
    const isShowModal = ref(false)
    // 头图
    const postsImage = computed(() => {
      if (posts.value?.image) {
        let image = posts.value.image as IImageProp
        image = resetImagesStyle(image, 850)
        return image.fitUrl
      } else {
        return null
      }
    })

    // markdown内容展示
    const md = new MarkdownIt()
    const postsHtml = computed(() => {
      if (posts.value?.content) {
        const { isHTML, content } = posts.value
        return isHTML ? content : md.render(posts.value.content)
      } else {
        return null
      }
    })

    // 编辑删除
    const isEdit = computed(() => {
      if (posts.value?.author) {
        const { _id } = posts.value.author as IUserProp
        const { isLogin } = user.value
        if (isLogin && _id === user.value._id) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    })

    const handleEdit = () => {
      router.push({
        path: '/posts/create',
        query: {
          id: posts.value?._id
        }
      })
    }
    const handleDelete = () => {
      isShowModal.value = true
    }
    const handleDeleteConfirm = () => {
      store.dispatch('deletePosts', currentPostsId).then(() => {
        messageCreate(
          {
            type: 'success',
            message: '删除成功'
          },
          () => {
            router.push({
              name: 'Column',
              params: {
                id: user.value.column
              }
            })
          }
        )
      })
    }

    onMounted(() => {
      store.dispatch('getPosts', currentPostsId)
    })
    return {
      user,
      posts,
      postsImage,
      postsHtml,
      isEdit,
      isShowModal,
      handleEdit,
      handleDelete,
      handleDeleteConfirm
    }
  }
})
</script>
